<template>
  <div class="main-layout">
    <!-- 头部 -->
    <header class="header">
      <header-component :show-back="true" title="用户管理" />
    </header>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧侧边栏 -->
      <aside class="sidebar">
        <aside-component />
      </aside>

      <!-- 页面主体内容 -->
      <div class="content-wrapper">
        <div class="content">
          <h2>用户管理</h2>

          <!-- 搜索框 -->
          <el-input
            v-model="searchKeyword"
            placeholder="请输入用户名进行搜索"
            prefix-icon="el-icon-search"
            style="max-width: 400px; margin-bottom: 20px;"
          />

          <!-- 用户列表表格 -->
          <el-table
            :data="filteredUserList"
            border
            style="width: 100%"
          >
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="username" label="用户名" width="150"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column label="角色" width="100">
              <template slot-scope="scope">
                <el-tag size="small" type="success" v-if="scope.row.role === 'admin'">管理员</el-tag>
                <el-tag size="small" v-else>普通用户</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template slot-scope="scope">
                <el-tag size="small" type="danger" v-if="scope.row.isBanned">已禁言</el-tag>
                <el-tag size="small" v-else>正常</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
              <template slot-scope="scope">
                <el-button size="mini" @click.stop="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="warning"
                  @click.stop="toggleBan(scope.row)"
                >{{ scope.row.isBanned ? '解禁' : '禁言' }}</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click.stop="handleKick(scope.$index, scope.row)"
                >踢出</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            layout="prev, pager, next"
            :total="filteredUserList.length"
            :page-size="10"
            @current-change="handlePageChange"
            style="margin-top: 20px; text-align: center"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AsideComponent from '@/components/Aside.vue'
import HeaderComponent from '@/components/Header.vue'

export default {
  name: 'UserManagement',
  components: { AsideComponent, HeaderComponent },
  data() {
    return {
      searchKeyword: '',
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    userList() {
      return this.$store.getters.getUserList || []
    },
    filteredUserList() {
      const keyword = this.searchKeyword.toLowerCase()
      return this.userList.filter(user =>
        user.username.toLowerCase().includes(keyword)
      )
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
    },
    handleEdit(index, row) {
      this.$message.info(`编辑用户：${row.username}`)
      this.$router.push({ path: `/user/edit/${row.id}` })
    },
    toggleBan(row) {
      if (row.isBanned) {
        this.$store.dispatch('unbanUser', row.id)
        this.$message.success(`${row.username} 已解除禁言`)
      } else {
        this.$store.dispatch('banUser', row.id)
        this.$message.warning(`${row.username} 已被禁言`)
      }
    },
    handleKick(index, row) {
      this.$confirm('此操作将把该用户踢出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('kickUser', row.id)
        this.$message.success('用户已踢出')
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    }
  }
}
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 60px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content-wrapper {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.content {
  max-width: 1000px;
  margin: auto;
}
</style>